<template>
    <div class='confirmPay'>
        <el-dialog :title="title" visible @close="$emit('close'); $emit('load')" width="65%" append-to-body
            :close-on-click-modal="false">
            <el-form ref="form" :model="form"  label-width="120px" v-loading="formLoading">
                
                <div style="margin-bottom: 30px;font-size:medium;"><span class="tit">商品信息</span></div>
                <el-table :data="form.items" style="margin-bottom: 50px;">
                    <!-- <el-table-column label="商品编号" align="center" prop="goods_code" /> -->
                    <el-table-column label="商品封面" align="center" prop="goods_cover">
                        <template slot-scope="scope">
                            <div v-if="scope.row.goods_cover" class="img-list">
                                <el-image style="width: 40px; height: 40px;border:1px solid #eee;border-radius: 50%;"
                                    :src="scope.row.goods_cover" :preview-src-list="[scope.row.goods_cover]">
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" align="center" prop="goods_name" />
                    <el-table-column label="商品规格" align="center" prop="goods_spec">
                        <template slot-scope="scope">
                            <span>{{ scope.row.goods_spec.split(";;").toString().replace(/::/g,':') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="销售价格" align="center" prop="price_selling" />
                    <el-table-column label="购买数量" align="center" prop="stock_sales" />
                    <el-table-column label="销售总价" align="center" prop="total_selling" />
                    <el-table-column label="已发货数量" align="center" prop="send_goods_number" />
                </el-table>
                <!-- <el-divider></el-divider> -->
                <div style="margin-bottom: 30px;font-size:medium;"><span class="tit">订单信息</span></div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单编号:" prop="order_no">
                            <span class="p">{{ form.order_no }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单状态:" prop="orders_state">
                            <span class="p">{{ selectDictLabel(btnList, form.orders_state) }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品总价:" prop="goods_total_price">
                            <span class="p">{{ form.goods_total_price }}</span>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="优惠券:" prop="coupon_price">
                            <span class="p">{{ form.coupon_price }}</span>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="运费:" prop="fee_price">
                            <span class="p">{{ form.fee_price }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="支付金额:" prop="pay_price">
                            <span class="p">{{ form.pay_price }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="总商品数量:" prop="total_number">
                            <span class="p">{{ form.total_number }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="已发货数量:" prop="send_goods_number">
                            <span class="p">{{ form.send_goods_number }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交易号:" prop="trade_no">
                            <span class="p">{{ form.trade_no }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="支付订单号:" prop="out_trade_no">
                            <span class="p">{{ form.out_trade_no }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单总计:" prop="order_total_price">
                            <span class="p">{{ form.order_total_price }}</span>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="12">
                        <el-form-item label="下单时间:" prop="create_time">
                            <span class="p">{{ parseTime(form.create_time*1000) }}</span>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="支付方式:" prop="pay_type">
                            <span class="p">{{ selectDictLabel(payType, form.pay_type) }}</span>
                        </el-form-item>
                    </el-col> -->

                    <!-- <el-col :span="12">
                        <el-form-item label="订单取消时间:" prop="cancel_time">
                            <span class="p">{{ form.cancel_time }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单取消原因:" prop="cancel_reason">
                            <span class="p">{{ form.cancel_reason }}</span>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="12">
                        <el-form-item label="优惠券金额:" prop="coupon_price">
                            <span class="p">{{ form.coupon_price }}</span>
                        </el-form-item>
                    </el-col> -->

                    <el-col :span="12">
                        <el-form-item label="确认支付说明:" prop="confirm_pay_remark">
                            <span class="p">{{ form.confirm_pay_remark }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="支付凭证:" prop="confirm_pay_image" >
                            <img :src="form.confirm_pay_image" class="avatar" v-if="form.confirm_pay_image">
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                
                <div style="margin-bottom: 30px;font-size:medium;"><span class="tit">收货信息</span></div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="收货姓名:" prop="address_name">
                            <span class="p">{{ form.address_name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收货手机:" prop="address_mobile">
                            <span class="p">{{ form.address_mobile }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收货地址:" prop="address_province">
                            <span class="p">{{ form.address_province }}{{ form.address_city }}{{ form.address_city }}{{
                                form.address_area }}{{ form.address_detailed }}</span>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="快递公司:" prop="truck.company_name">
                            <span class="p">{{ form.truck.company_name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="快递单号:" prop="truck.send_number">
                            <span class="p">{{ form.truck.send_number }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发货时间:" prop="truck.send_time">
                            <span class="p">{{ form.truck.send_time }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否发货:" prop="truck.is_send">
                            {{ selectDictLabel(sendStatus, form.truck.is_send) }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="快递配送描述:" prop="truck.send_remark">
                            <span class="p">{{ form.truck.send_remark }}</span>
                        </el-form-item>
                    </el-col> -->
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close()">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import throttle from 'lodash.throttle'
import { confirmGoodsPay } from "@/api/order/goodsOrder.js"
export default {
    name: 'confirmPay',
    props: {
        title: String,
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        data: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },

    components: {

    },
    data() {
        return {
            loading: false,
            formLoading: false,
            form: {
            },
            btnList: [
                // {
                //     dictLabel: '全部订单',
                //     dictValue: ''
                // },
                {
                    dictLabel: '待付款',
                    dictValue: 0
                },
                {
                    dictLabel: '已付款',
                    dictValue: 1
                },
                {
                    dictLabel: '已取消',
                    dictValue: -1
                }
            ],

            // rules: {
            //     image: [{ required: true, message: '请上传支付凭证', trigger: 'blur' }],
            //     remark: [{ required: true, message: '请输入确认支付说明', trigger: 'blur' }],
            // },

        }
    },
    created() {
        console.log(this.data, '++')
        if(this.data){
            this.form = { ...this.form, ...this.data }
        }
    },
    methods: {
        close() {
            this.$emit('close');
        },
        // handleAvatarSuccess(res, file) {
        //     this.$set(this.form, 'image', res.data[0].fileurl)
        // },
        // submit:throttle(function () { 
        //     confirmGoodsPay(this.form).then(res => {
        //         this.msgSuccess("操作成功！");
        //         this.close()
        //         this.formLoading = false;
        //         this.$emit('load')
        //     }).catch(() => {
        //         this.formLoading = false;
        //     })
        // }, 1000, { trailing: false })
    },
}

</script>
<style scoped lang='scss'></style>